iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Software Development

【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】系列 第 7

【沒錢買ps,PyQt自己寫】Day 7 – 我們的第一個 input 手段 - QPushButton

  • 分享至 

  • xImage
  •  

看完這篇文章你會得到的成果圖

前言

我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://www.wongwonggoods.com/python/pyqt5-5/

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day07_input_button

UI 設計部份 (UI.py)

Qt designer 部份

一樣先打開我們的 Qt designer,
這篇我們要介紹的是 QPushButton,
作為我們第一個「input」用的功能。

這邊講的「input」,是廣義的「input」,也就是任何輸入進我們程式的訊號,
反之,「output」,就是指任何從我們程式輸出的訊號

我們在 Buttons 中找到 Push Button,
拖曳至視窗自己喜歡的地方,就完成今天的設計囉!

一樣,我們可以修改物件的名稱,使我們在未來更容易是哪一個功能。

轉換成 UI.py

一樣的編譯指令,我們加上 -x (也可不加),
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day7.ui -> UI.py

pyuic5 -x day7.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣,這程式只有介面 (視覺上的呈現),沒有任何互動功能

  • 看看我們製作出來的介面
python UI.py

看起來符合我們的想像就沒問題了。

controller 設計部份 (controller.py)

接下來,我們必須先研究一下我們剛剛的程式,
把我們剛剛程式中的「物件名稱」找出來。

名稱也可以自己在設計 Qt desginer 時設定,可以看上一個 part 我有框起來的部份。

從 UI.py 中找出物件名稱

如果讀者使用的是預設的名稱,應該會在剛轉換完成的 UI.py 中 找到以下這段,

我們發現我們剛剛的 Push Button 名稱為 pushButton,
(注意大小寫,這可能導致程式錯誤。)
當然,這絕對不是一個好名稱,不過這邊作為示範,我們就不多做改動。

取得名稱後,去修改 controller.py

還記得我們在 day5 中的模板嗎?這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

class MainWindow_controller(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__() # in python3, super(Class, self).xxx = super().xxx
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        # qpushbutton doc: https://doc.qt.io/qt-5/qpushbutton.html
        self.ui.pushButton.setText('Print message!')
        self.clicked_counter = 0
        self.ui.pushButton.clicked.connect(self.buttonClicked)

    def buttonClicked(self):
        self.clicked_counter += 1
        print(f"You clicked {self.clicked_counter} times.")

我們在新增或修改了 setup_control(), buttonClicked() 這兩個部份

在 setup_control() 中

  • self.ui.pushButton.setText('Print message!'):將按鈕修改為 "Print message!"
  • self.clicked_counter = 0,設定一個儲存我們現在按了按鈕幾次的變數
  • [重要] self.ui.pushButton.clicked.connect(self.buttonClicked),連結 self.buttonClicked() 這個 function,使當按鈕被按下時,能夠執行 function 裡面的功能。

在 buttonClicked() 中

這裡我們要定義的是按鈕被按下時,會執行的事件內容,
這裡作為示範,我們寫的很簡單,
用 self.clicked_counter += 1,更新點擊的次數,
並用 print(f"You clicked {self.clicked_counter} times."),
在 terminal 上印出現在點擊的次數。

執行結果

照我們 day5 的程式架構,我們執行

python start.py

結果會是,當我們每按一次按鈕,
terminal 就會多顯示一行,並告訴我們現在點擊的次數。


★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節,閱讀起來更流暢):【PyQt5】Day 7 - 我們的第一個 input 手段 - QPushButton


上一篇
【沒錢買ps,PyQt自己寫】Day 6 – 我們的第一個 output 手段 – Qlabel
下一篇
【沒錢買ps,PyQt自己寫】Day 8 – 我們的第二個 input 手段 – QLineEdit
系列文
【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言